<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix header-container">
        <h3>下架商品</h3>
        <div class="header-controls">
          <el-input
              placeholder="请输入商品编号"
              v-model="searchKeyword"
              class="short-input"
              clearable
          >
            <template #append>
              <el-button type="primary" @click="submitSearch">
                <el-icon><Search /></el-icon>
              </el-button>
            </template>
          </el-input>
          <el-button type="default" @click="resetSearch">全部</el-button>
        </div>
      </div>
      <el-table :data="filteredData" style="width: 100%; margin-top: 20px;">
        <el-table-column prop="product_id" label="商品编号" width="180"></el-table-column>
        <el-table-column prop="product_name" label="商品名称" width="180"></el-table-column>
        <el-table-column prop="product_price" label="商品单价">
          <template #default="scope">
            <span>{{ scope.row.product_price }}</span><span class="red-text"> 元</span>
          </template>
        </el-table-column>
        <el-table-column prop="category" label="商品类别"></el-table-column>
        <el-table-column prop="product_detail" label="商品详情"></el-table-column>
        <el-table-column label="商品图片">
          <template #default="scope">
            <el-image
                :src="`/${scope.row.product_image}`"
                class="product-image"
                fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="处理人" width="180"></el-table-column>
      </el-table>
    </el-card>
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 4, 5, 6]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalItems"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import axios from 'axios';
import { Search } from '@element-plus/icons-vue';

export default {
  components: {
    Search
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      totalItems: 0,
      tableData: [],
      filteredData: [],
      searchKeyword: ''
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('http://localhost:8080/approvalproduct/downproduct')
          .then(response => {
            this.tableData = response.data;
            this.totalItems = response.data.length; // Assuming all data is returned
            this.filteredData = response.data; // Initially show all data
          })
          .catch(error => {
            console.error('Error fetching data:', error);
          });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.fetchData();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchData();
    },
    handleSearch() {
      if (this.searchKeyword) {
        this.filteredData = this.tableData.filter(item =>
            item.product_id.toString().includes(this.searchKeyword)
        );
      } else {
        this.filteredData = this.tableData;
      }
    },
    submitSearch() {
      this.handleSearch();
    },
    resetSearch() {
      this.searchKeyword = '';
      this.filteredData = this.tableData;
    }
  }
};
</script>

<style scoped>
.box-card {
  width: 95%;
  margin: 20px auto;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-controls {
  display: flex;
  align-items: center;
}

.short-input {
  width: 250px; /* Adjust the width as necessary */
}

.product-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.red-text {
  color: red;
}
</style>
